<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 2.子传父：子组件通过事件向父组件发送消息 -->
    <!-- (1)在子组件中，使用$emit()来触发事件 -->
    <!-- (2)在父组件中，使用v-on来监听子组件 -->

    <div id="app">
        <!-- 3.使用子组件 -->
        <!-- v-on不仅可以监听DOM事件，还可以监听自定义事件 -->
        <!-- 5.使用v-on监听子组件触发的事件 -->
        <!-- @add：表示v-on监听自定义事件add,而$emit就是用于触发add事件 -->
        <child-cpn @add="allNum" @sub="allNum"></child-cpn>

        <h1>父组件里面的数字；{{num}}</h1>

    </div>
    <script src="./vue.js"></script>
    <!-- 1.创建子组件模板 -->
    <template id="child">
        <div>
            <button @click="sub">-</button>
            <button @click="add">+</button>
            <h3>子组件里面的数字：{{count}}</h3>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "hello world",
                num: 0
            },
            methods:{
                allNum(count){
                    // count:形参，表示子组件传过来的数据
                    this.num=count;//把子组件的值赋值给父组件的num属性
                }

            },
            // 2.注册子组件
            components: {
                "child-cpn": {
                    template: "#child",
                    data() {
                        return {
                            count: 0
                        }

                    },
                    methods: {
                        add() {
                            this.count++;
                            // 4.使用$emit方法触发事件
                            this.$emit("add",this.count);
                            // 第一个参数表示函数名称
                            // 第二个参数表示传给父组件的数据
                        },
                        sub() {
                            this.count--;
                            this.$emit("sub",this.count);

                        }
                    }
                },

            }
        })
    </script>


</body>

</html>